<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>FreeMarker</title>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-table" id="table">
                <colgroup>
                    <col width="300">
                    <col width="300">
                    <col width="250">
                </colgroup>
                <thead>
                <tr>
                    <th>表名</th>
                    <th>表备注</th>
                    <th>操作</th>
                </thead>
                <tbody>
                <#list list as tb>
                    <tr>
                        <td>${tb.getName()}</td>
                        <td>${tb.getRemarks()}</td>
                        <td><span class="isShow isShow_${tb_index}" datatype="isShow_${tb_index}">显示字段</span></td>
                    </tr>
                </#list>
                </tbody>
            </table>
        </div>
    </div>
    <#list list as tb>
        <div class="layui-row show show_${tb_index}" style="display: none">
            <div class="layui-col-md12">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>字段</th>
                        <th>类型</th>
                        <th>长度</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                    <tbody>
                        <#list tb.list as column>
                            <tr>
                                <td>${column.getColumnName()}</td>
                                <td>${column.getTypeName()}</td>
                                <td>${column.getColumnSize()}</td>
                                <td>${column.getRemarks()}</td>
                            </tr>
                        </#list>
                    </tbody>
                </table>
            </div>
        </div>
    </#list>
</div>
<script src="/static/js/jquery-3.4.1.js"></script>
<script src="/static/js/layui/layui.js"></script>
</body>
<script>
    $(function () {

        layui.use('layer', function () {
            var layer = layui.layer;
        });

        $('.isShow').show();
        $('.show').hide();

        $('.isShow').click(function (e) {
            var index = $('.isShow').index(this);
            $('.show').hide();
            $('.show_' + index).toggle();

            var isShow = $('.show_' + index).is(":visible");
            if (isShow) {
                $('.isShow').text('显示字段');
                $('.isShow_' + index).text('隐藏字段');
            } else {
                $('.isShow_' + index).text('显示字段');
            }

        })
    })
</script>
</html>